<template>
    <el-row :style="{'text-align': 'center'}">
        <el-col :span="24">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="changeScale(1)">放大</el-button>
            <el-button type="primary" icon="el-icon-minus" size="small" @click="changeScale(-1)">缩小</el-button>
            <el-button type="primary" icon="el-icon-refresh-left" size="small" @click="rotateLeft()">左旋转</el-button>
            <el-button type="primary" icon="el-icon-refresh-right" size="small" @click="rotateRight()">右旋转</el-button>
        </el-col>
        <el-col :span="24" :style="{height: '350px', margin:'10px 0'}">
            <VueCropper ref="cropper" v-bind="options"></VueCropper>
        </el-col>
        <el-col>
            <el-button @click="onCancel">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </el-col>
    </el-row>
</template>

<script>
import { VueCropper } from "vue-cropper";

export default {
    name: 'mmv-cur-image',
    components: {
        VueCropper,
    },
    props: {
        img: {
            type: String,
            default: '',
        }
    },
    data() {
        return {

        };
    },
    computed: {
        options() {
            return {
                img: this.img,
                full: true,
                canMove: true,
                autoCrop: true, // 是否默认生成截图框
                autoCropWidth: 200, // 默认生成截图框宽度
                autoCropHeight: 200, // 默认生成截图框高度
            };
        }
    },
    methods: {
        onSubmit() {
            this.$refs.cropper.getCropBlob(data => {
                this.$emit('submit', data);
            })
        },
        onCancel() {
            this.$emit('cancel');
        },

        // 向左旋转
        rotateLeft() {
            this.$refs.cropper.rotateLeft();
        },
        // 向右旋转
        rotateRight() {
            this.$refs.cropper.rotateRight();
        },
        // 图片缩放
        changeScale(num) {
            num = num || 1;
            this.$refs.cropper.changeScale(num);
        },
    },
}
</script>
